<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>Arabic</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/libs/hotcss.js"></script>
</head>
<body>
<div class="wrap">
    <!--<div id="main-loading" style="background: url('./src/images/loading.gif') 50% no-repeat;"></div>-->
    <div class="good-list">

    </div>
</div>
<script src="js/libs/jquery-1.11.1.min.js"></script>
<script src="js/libs/echo.min.js"></script>
<script>

    $(function () {
        var page = 1;
        var isloading = false;

        function loadImg(list) {
            if (list.length == 0) {
                isloading = true;
            }
            var html = '';
            list.map(function (val, index) {
                html += '<div class="good-item" id="' + val.id + '">\
                        <div class="thumb">\
                        <a href="' + val.url + '" class="good-link">\
                        <img class="lazy" src="images/blank.gif" data-echo="' + val.display_image + '" alt="">\
                        </a>\
                        </div>\
                        <div class="good-detail">\
                        <div class="good-price text_c">$' + val.price + '</div>\
                        </div>\
                        </div>';
            });
            $(".good-list").append(html);
            Echo.init({
                offset: 300,
                throttle: 0
            });
        }

        function getImgList() {
            isloading = true;
            $.ajax({
                url: "http://47.91.105.255/itemlist/" + page,
                type: 'get',
                dataType: 'json',
                success: function (res) {
//                    if (page == 1) {
//                        $("#main-loading").hide();
//                    }
                    loadImg(res);
                    isloading = false;
                    page++;
                }
            })
        }

        getImgList();

        $(window).scroll(function () {
            var scrollHeight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
            if ($(document).height() - scrollHeight < 300 && !isloading) {
                getImgList();
            }
        })

    });

</script>
</body>
</html>